import MessageComponent from '../components/Message'

export default {
    install: (Vue) => {
        // Vue.extend( options ) 创建构造器
        const Message = Vue.extend(MessageComponent)
        // 创建实例
        const vm = new Message()
        // 挂载并返回vm实例自身
        // $mount()，处于未挂载状态，没有关联的Dom元素，模板将被渲染为文档之外的的html元素
        // $el Vue实例使用的根Dom元素
        const $el = vm.$mount().$el

        // 组件在事件循环队列清空时的下一个“tick”更新，即挂载
        Vue.nextTick(() => {
            document.querySelector('#main-container').prepend($el)
        })

        // 虚拟节点绑定事件监听器
        vm.$on('update:show', (value) => {
            vm.show = value
        })

        // 构建属性对象
        const message = {
            show(msg = '', type = 'success') {
                vm.msg = msg
                vm.type = type
                vm.show = false

                Vue.nextTick(() => {
                    vm.show = true
                })
            },

            hide() {
                Vue.nextTick(() => {
                    vm.show = false
                })
            }
        }

        Vue.prototype.$message = message
    }
}